import { KeyboardEvent, ReactElement, useEffect, useState,FC } from 'react'
import { DownOutlined } from '@ant-design/icons'
import FreeScrollBar from 'react-free-scrollbar'
import telZone, { ZoneSchema } from '@js/telZone'
import { Popover, Input } from 'antd'
import style from '../index.module.less'
import ClearBtn from './clearBtn'
import Notice from './notice'
import SendBtn from './sendBtn'

const FreeScrollBarTag = FreeScrollBar as unknown as FC<any>
const zoneTelList: string[] = []
telZone.forEach(l => zoneTelList.push(l.tel))
const { Search } = Input

// 回车触发提交
function enterHandle (e: KeyboardEvent, login: () => void) {
  const key = e.keyCode || e.which || e.charCode
  if (key === 13) {
    login()
  }
}

// 获取过滤后的区号
function getFilterTelZone (zoneSearchStr: string) {
  return telZone.filter(li => {
    const en = li.en.toLocaleLowerCase()
    const s = zoneSearchStr.toLocaleLowerCase()
    const isTel = li.tel.indexOf(s) !== -1
    const isCn = li.name.indexOf(s) !== -1
    const isEn = en.indexOf(s) !== -1
    return isTel || isCn || isEn
  })
}

interface Props {
  zoneNum: string
  setZoneNum: (v: string) => void
  verification: string
  setVerification: (v: string) => void
  mobile: string
  setMobile: (v: string) => void
  noticeMobile: string
  setNoticeMobile: (v: string) => void
  noticeVerification: string
  login: () => void
}

function Main ({ zoneNum, setZoneNum, verification, setVerification, mobile, setMobile, noticeMobile, setNoticeMobile, noticeVerification, login }: Props): ReactElement {
  const [visible, setVisible] = useState(false)
  const [zoneSearchStr, setZoneSearchStr] = useState('')
  const [zoneList, setZoneList] = useState<ZoneSchema[]>([])
  const [loopTime, setLoopTime] = useState(0)
  useEffect(() => {
    setZoneList(getFilterTelZone(zoneSearchStr))
  }, [zoneSearchStr])
  return (
    <div>
      <div className={style['mobile-block']}>
        <div className={style['zone-block']}>
          <input className={style['zone-input']} type='text' maxLength={5} value={`+${zoneNum}`} onChange={v => setZoneNum(v.target.value.slice(1))} onKeyPress={e => enterHandle(e, login)} />
          <Popover
            content={
              <div className={style['zone-tel-block']}>
                <Search
                  placeholder='请输入区号、中文名或者英文名'
                  onInput={v => setZoneSearchStr(v.currentTarget.value)}
                  onChange={v => setZoneSearchStr(v.target.value)}
                  allowClear
                  className={style['zone-tel-search']}
                />
                <ul className={style['zone-list']}>
                  <FreeScrollBarTag className='mock'>
                    {zoneList.map((li, i) => {
                      return (
                        <li key={i} onClick={() => setZoneNum(li.tel)}>
                          <span className={style['zone-tel']}>+{li.tel}</span>
                          <span className={style['zone-cn']}>{li.name}</span>
                          <span className={style['zone-en']}>({li.en})</span>
                        </li>
                      )
                    })}
                  </FreeScrollBarTag>
                </ul>
              </div>
            } trigger='click' visible={visible}
            onVisibleChange={v => setVisible(v)}
          >
            <div className={style['zone-block-arrow']}>
              <DownOutlined />
            </div>
          </Popover>
        </div>
        <input className={style['mobile-input']} type='text' autoComplete='off' placeholder='请输入你的手机号码' maxLength={11} value={mobile} onChange={v => setMobile(v.target.value)}  onKeyPress={e => enterHandle(e, login)} />
        <ClearBtn value={mobile} onChange={setMobile} />
      </div>
      <div className={style['white-space']}>
        <Notice value={noticeMobile} />
      </div>
      <div className={style['verification-block']}>
        <div className={style['verification-input']}>
          <input type='text' placeholder='请输入验证码' maxLength={4} autoComplete='off' value={verification} onChange={v => setVerification(v.target.value)} onKeyPress={e => enterHandle(e, login)} />
          <ClearBtn value={verification} onChange={setVerification} />
        </div>
        <SendBtn mobile={mobile} zoneNum={zoneNum} zoneTelList={zoneTelList} setNoticeMobile={setNoticeMobile} />
      </div>
      <div className={style['white-space']}>
        <Notice value={noticeVerification} />
      </div>
    </div>
  )
}

export default Main
